<template>
  <div class="indexitem">
    <!-- 我是 indexItem -->
    <div class="bussiness-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group>
          <van-cell
            class="vancell"
            v-for="(item, index) in companyList"
            :key="index"
          >
            <template #title>
              <div class="title-left">
                <img class="business-pic" :src="baseUrl + item.logo" />

                <div class="info">
                  <div class="title">{{ item.name }}</div>
                  <div class="iocation">
                    <span>{{ item.region }}</span>
                    <span>{{ item.distance }}</span>
                  </div>
                  <div class="business-info">
                    <span>{{ item.type }}</span>
                    <span>{{ item.step }}</span>
                    <span>{{ item.scale }}</span>
                  </div>
                  <div class="list-btm">
                    在招职位 <span>{{ item.positions }}</span> /最后更新时间:
                    {{ item.updated_at | formatTime }}
                  </div>
                </div>
              </div>
            </template>
            <template #default> {{ item.score }}分 </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<script>
// 导入api
import { companyList } from '@/api/api.js'
export default {
  props: {
    distance: {
      type: String,
      default: 'asc'
    },
    score: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 企业列表
      companyList: [],
      loading: false,
      finished: false,
      limit: 10,
      start: 0,
      // companyInfo: {},
      // 基地址
      baseUrl: process.env.VUE_APP_URL
    }
  },
  methods: {
    // 获取企业的列表与信息
    // async getCompany () {
    //   const res = await companyList()
    //   console.log(res)
    //   // 赋值
    //   this.companyList = res.data.list
    //   console.log(this.companyList)
    // },
    // 上拉加载更多事件
    async onLoad () {
      const res = await companyList({
        limit: this.limit,
        start: this.start,
        distance: this.distance,
        score: this.score
      })
      // console.log(res)
      // 赋值
      this.companyList = [...this.companyList, ...res.data.list]
      // console.log(this.companyList)
      this.start += this.limit
      this.loading = false
      const nums = Math.ceil(res.data.total / this.limit) * this.limit
      // console.log(nums)
      // 判断
      if (this.start === nums) {
        this.finished = true
      }
    }
  },
  watch: {
    distance (newVal, oldVal) {
      this.onLoad()
    },
    score (newVal, oldVal) {
      this.onLoad()
    }
  }
  // 页面一进来就执行
  // created () {
  //   this.getCompany()
  // }
}
</script>

<style lang="less" scoped>
.indexitem {
  .bussiness-list {
    margin-top: 270px;
    .vancell {
      padding: 30px 15px;
    }
    .title-left {
      display: flex;
      .business-pic {
        width: 65px;
        height: 65px;
        // padding-top: 7px;
        margin-right: 10px;
      }
      .info {
        font-size: 8px;
        .title {
          font-size: 18px;
        }
        .iocation {
          span {
            padding-right: 5px;
          }
        }
        .business-info {
          margin-top: 7px;
          span {
            background-color: #f7f4f5;
            padding: 5px 5px;
            margin-right: 10px;
          }
        }
        .list-btm {
          margin-top: 7px;
          color: #b4b4bd;
          span {
            color: #53b5d1;
          }
        }
      }
    }
    /deep/ .van-cell__title {
      flex: 10;
    }
    /deep/ .van-cell__value {
      flex: 2;
    }
  }
}
</style>
